<template>
  <page-header-wrapper :title="false">
    <a-card title="设计师稿件筛选">
      <template slot="extra">
        <a-button size="small" type="primary" icon="redo" @click="resetForm">刷新</a-button>
      </template>
      <div class="table-page-search-wrapper">
        <a-form-model
          layout="inline"
          :model="queryParam"
        >
          <a-row :gutter="15">
            <a-col :md="6" :sm="24">
              <a-form-model-item label="合同编号">
                <a-input v-model="queryParam['filter[contract_no]']" placeholder="请输入合同编号" :allowClear="true" />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="业务编号">
                <a-input v-model="queryParam['filter[business_no]']" placeholder="请输入业务编号" :allowClear="true"/>
              </a-form-model-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="6" :sm="24">
                <a-form-model-item label="业务名称">
                  <a-select v-model="queryParam['filter[business_id]']" placeholder="请选择业务名称">
                    <a-select-option v-for="(item, index) in businessOpts" :key="index" :value="item.business_id">{{item.name}}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="所属顾问">
                  <a-input v-model="queryParam['filter[username]']" placeholder="请输入所属顾问" :allowClear="true"/>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="下单时间">
                  <a-range-picker v-model="queryParam['submit_time_start']" @change="onChangeSubmit" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="定稿时间">
                  <a-range-picker v-model="queryParam['sj_confirm_time_start']" @change="onChangeConfirm" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="指派时间">
                  <a-range-picker v-model="queryParam['designer_appoint_time_start']" @change="onChangeReceive" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="业务状态">
                  <a-select v-model="queryParam['filter[status2]']" placeholder="请选择业务状态" :allowClear="true">
                    <a-select-option v-for="(item,index) in statusOpts" :key="index" :value="index">{{item}}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="设计人员">
                  <a-select v-model="queryParam['filter[design_uid]']" placeholder="请选择设计师" :allowClear="true">
                    <a-select-option v-for="(item,index) in designerOpts" :key="index" :value="index">{{item}}</a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
                <span class='table-page-search-submitButtons' :style="advanced && { float: 'right', overflow: 'hidden' } || {}">
                  <a-button type="primary" @click="$refs.table.refresh(true)">搜索</a-button>
                  <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
                  <a @click="toggleAdvanced" style="margin-left: 8px">
                    {{ advanced ? '收起' : '展开' }}
                    <a-icon :type="advanced ? 'up' : 'down'" />
                  </a>
                </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div>
        <s-table
          bordered
          size="middle"
          ref="table"
          :row-class-name="(record) => { if (record.today_order == 1) return 'table-color-dust' }"
          :row-key="(record) => record.cb_id"
          :columns="designColumns"
          :data="designData"
        >
          <template slot="contract_no" slot-scope="text, record">
            <div>{{text}}</div>
            <a @click="handleButtonClick(record.cb_id)">{{record.business_no}}</a>
          </template>
          <template slot="username" slot-scope="text,record">
            <a-tag>{{text}}</a-tag><br>
            <a-tag>{{record.group_type}}组</a-tag><br>
            <a-tag>{{record.leader_name}}</a-tag>
          </template>
          <template slot="history" slot-scope="text, record">
            <a @click="historyModal(record.cb_id)">{{text}}</a>
          </template>
          <template slot="status2" slot-scope="text,record">
            <a-tag v-if="record.status2_code == 20 || record.status2_code == 22" color="red">{{text}}</a-tag>
            <a-tag v-else color="blue">{{text}}</a-tag>
          </template>
          <template slot="sj_filename" slot-scope="text,record">
            <a-button v-if="text != ' '" type="link" icon="download" size="small" @click="download(record.sj_file, text)"><ellipsis :length="20">{{text}}</ellipsis></a-button>
            <a-tag v-else color="red">暂无文件</a-tag>
          </template>
          <template slot="official_fee" slot-scope="text,record">
            <a-tag color="red">官费：{{text}}</a-tag><br>
            <a-tag color="red">价格：{{record.price}}</a-tag><br>
            <a-tag color="red">代理费：{{record.agency_fee}}</a-tag>
          </template>
<!--          <template slot="action" slot-scope="text,record">-->
<!--            <a-dropdown-button size="small" type="primary" @click="handleButtonClick(record.cb_id)">-->
<!--              查看-->
<!--              <a-menu slot="overlay" @click="(e) => handleMenuClick(e, record.cb_id)">-->
<!--                <a-menu-item key="1"> <a-icon type="download" />下载</a-menu-item>-->
<!--                <a-menu-item key="2"> <a-icon type="upload" />上传</a-menu-item>-->
<!--              </a-menu>-->
<!--            </a-dropdown-button>-->
<!--          </template>-->
          <template slot="action" slot-scope="text, record">
            <a-button type="primary" size="small" @click="handleButtonClick(record.cb_id)">查看</a-button>
          </template>
        </s-table>
      </div>
    </a-card>
    <a-modal
      centered
      v-model="historyVisible"
      title="历史信息"
      :footer="null"
    >
      <a-timeline>
        <a-timeline-item v-for="(item,index) in historyData" :key="index">
          {{item.step}}{{item.username}},{{item.notes}} {{item.created_at}}
        </a-timeline-item>
      </a-timeline>
    </a-modal>
    <a-modal
      centered
      v-model="submitVisible"
      :confirm-loading="loading"
      title="编辑状态"
      @ok="submitChangeStatus"
    >
      <a-form-model
        :model="changeStatusForm"
      >
        <a-form-model-item>
          <a-radio-group v-model="changeStatusForm.status2" @change="onChangeStatus">
            <a-radio v-for="(item,index) in changeStatusOpts" :key="index" :value="index">
              {{item}}
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item>
          <a-textarea v-model="changeStatusForm.notes" :rows="4" placeholder="请输入材料备注"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      centered
      title="上传定稿文件"
      :confirm-loading="loading"
      v-model="uploadVisible"
      @ok="submitUpload"
    >
      <a-form-model
        :model="uploadForm"
      >
        <a-form-model-item label="业务名称">
          <a-input disabled v-model="uploadForm.business_name" type="text" />
        </a-form-model-item>
        <a-form-model-item label="上传定稿文件">
          <a-upload
            name="file"
            accept=".rar,.zip,.7z"
            :multiple="true"
            :headers="headers"
            :action="uploadUrl"
            :show-upload-list="false"
            @change="onChange"
          >
            <a-button type="danger"> <a-icon type="upload" />上传定稿文件</a-button>
          </a-upload>
        </a-form-model-item>
        <a-button v-if="uploadForm.mat" size="small" type="link" icon="download" @click="download(uploadForm.mat.file, uploadForm.mat.filename)"><ellipsis :length="30">{{uploadForm.mat.filename}}</ellipsis></a-button>
      </a-form-model>
    </a-modal>
    <a-modal
      centered
      title="下载材料"
      v-model="downloadVisible"
    >
      <a-form-model
        ref="downloadForm"
      >
        <a-form-model-item :label="item.mat_name" v-for="(item,index) in downloadForm.data" :key="index" :value="index">
          <div v-if="item.mat_name === '上传设计单'">
            <a-button v-if="item.filename" size="small" type="link" icon="download" @click="download(item.value, item.filename)"><ellipsis :length="30">{{item.filename}}</ellipsis></a-button>
          </div>
          <div v-else>
            {{item.value}}
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import { Ellipsis, STable } from '@/components'
  import {
    getDesignList,
    getDesignHistory,
    getDesignStatus,
    postDesignStatus,
    getDesignUpload,
    postDesignUpload,
    getDesignDownload
  } from '@/api/design.process'
  import designColumns from '@/columns/design.process'
  import storage from 'store'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import apis from '@/api'

  export default {
    components: {
      STable,
      Ellipsis
    },
    name: 'DesignFilter',
    data () {
      return {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
        queryParam: {},
        advanced: true,
        designColumns: designColumns.design_filter,
        statusOpts: {},
        designerOpts: {},
        businessOpts: {},
        changeStatusForm: {},
        historyVisible: false,
        submitVisible: false,
        downloadVisible: false,
        uploadVisible: false,
        downloadForm: {},
        uploadForm: {},
        historyData: {},
        designForm: {},
        designLoading: false,
        designData: parameters => {
          return getDesignList(Object.assign(parameters, this.queryParam)).then(res => {
            this.statusOpts = res.result.status2_opts
            this.designerOpts = res.result.designer_opts
            this.businessOpts = res.result.business_opts
            return res.result
          })
        },
        loading: false,
        headers: {
          'Access-Token': storage.get(ACCESS_TOKEN)
        },
        uploadUrl: apis.Upload,
        changeStatusOpts: {}
      }
    },
    activated () {
      if (this.isEmptyObject(this.$route.params)) {
        this.queryParam = this.$route.params
        this.$refs.table.refresh(true)
      }
    },
    methods: {
      isEmptyObject (obj) {
        for (const k in obj) {
          return true
        }
        return false
      },
      onChangeSubmit (date, dateString) {
        this.queryParam['filter[submit_time_start]'] = dateString[0]
        this.queryParam['filter[submit_time_end]'] = dateString[1]
      },
      onChangeConfirm (date, dateString) {
        this.queryParam['filter[sj_confirm_time_start]'] = dateString[0]
        this.queryParam['filter[sj_confirm_time_end]'] = dateString[1]
      },
      onChangeReceive (date, dateString) {
        this.queryParam['filter[designer_appoint_time_start]'] = dateString[0]
        this.queryParam['filter[designer_appoint_time_end]'] = dateString[1]
      },
      submitChangeStatus () {
        const app = this
        const data = {}
        app.loading = true
        data['contract_business[status2]'] = app.changeStatusForm.status2
        data['contract_business[notes]'] = app.changeStatusForm.notes
        postDesignStatus(app.changeStatusForm['cb_id'], data).then(res => {
          if (res.status === 0) {
            app.onCancel()
            app.$refs.table.refresh()
          } else {
            app.$warning({
              title: res.msg
            })
          }
        }).finally(() => {
          app.loading = false
        })
      },
      changeStatus (id) {
        const app = this
        app.changeStatusForm = {}
        app.changeStatusForm['cb_id'] = id
        getDesignStatus(id).then(res => {
          if (res.status === 0) {
            app.changeStatusOpts = res.result.status2_items
            app.submitVisible = true
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      onCancel () {
        this.changeStatusForm = {}
        this.submitVisible = false
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      resetForm () {
        this.queryParam = {}
        this.$refs.table.refresh(true)
      },
      handleButtonClick (id) {
        this.$router.push({ name: 'DesignEdit', params: { id } })
      },
      download (value, filename) {
        window.open(apis.Download + '?value=' + value + '&filename=' + filename)
      },
      handleMenuClick (e, id) {
        if (e.key === '1') {
          this.downloadModal(id)
        } else if (e.key === '2') {
          this.onUpload(id)
        }
      },
      historyModal (id) {
        const app = this
        getDesignHistory(id).then(res => {
          if (res.status === 0) {
            app.historyData = res.result.data
            app.historyVisible = true
          } else {
            app.$error({
              title: '警告',
              content: res.msg
            })
          }
        })
      },
      downloadModal (id) {
        getDesignDownload(id).then(res => {
          this.downloadForm = res.result
          this.downloadVisible = true
        })
      },
      onUpload (id) {
        getDesignUpload(id).then(res => {
          this.uploadForm = res.result
          this.uploadForm['cb_id'] = id
          this.uploadVisible = true
        })
      },
      submitUpload () {
        const app = this
        const data = {}
        data['contractBusiness[file]'] = app.uploadForm.mat.file
        data['contractBusiness[filename]'] = app.uploadForm.mat.filename
        postDesignUpload(this.uploadForm['cb_id'], data).then(res => {
          if (res.status === 0) {
            app.uploadVisible = false
            app.$refs.table.refresh()
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      onChange (info) {
        if (info.file.status === 'uploading') {
          this.loading = true
          return false
        }
        if (info.file.status === 'done') {
          this.uploadForm.mat.filename = info.file.name
          this.uploadForm.mat.file = info.file.response.result.url
          this.loading = false
        }
      },
      onChangeStatus (key) {}
    }
  }
</script>

<style scoped>
  /deep/ .ant-table-tbody > tr.table-color-dust {
    background-color: #ffcccc;
  }
  /deep/.ant-input[disabled]{color: red;}
  /deep/ .ant-statistic-content {
    font-size: 16px;
    color: #f00;
  }
  /deep/ .ant-table-tbody > tr.table-color-dust {
    background-color: #ffcccc;
  }
</style>
